<template>
  <div
    :class="className"
    :style="{height: height, width: width}"
  />
</template>

<script lang="ts">
import * as echarts from 'echarts'
import { EChartsOption, PieSeriesOption } from 'echarts'
import { Component, Prop } from 'vue-property-decorator'
import { mixins } from 'vue-class-component'
import ResizeMixin from '@/components/Charts/mixins/resize'

@Component({
  name: 'KRIChart',
  components: {}
})
export default class extends mixins(ResizeMixin) {
  @Prop({ default: 'chart' }) private className!: string
  @Prop({ default: '100%' }) private width!: string
  @Prop({ default: '300px' }) private height!: string

  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  }

  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  }

  private async initChart() {
    this.chart = echarts.init(this.$el as HTMLDivElement)

    const dataInner = [
      {
        name: '',
        value: 23
      }, {
        name: '未发生预警',
        value: 73
      }
    ]

    const dataOuter = [{
      name: '关注区域',
      value: 16
    }, {
      name: '警戒区域',
      value: 7
    }, {
      name: '未发生预警',
      value: 73
    }
    ]

    this.setOptions(dataInner, dataOuter)
  }

  private setOptions(dataInner: any[], dataOuter: any[]) {
    if (!this.chart) {
      return
    }

    const option: EChartsOption = {
      title: {
        text: 'KRI情况'
      },
      legend: {
        bottom: 0
      },
      tooltip: {
        trigger: 'item'
      },
      series: [
        {
          type: 'pie',
          radius: [0, '30%'],
          label: {
            // show: false,
            position: 'inside',
            formatter: '{c}'
          },
          data: dataInner
        },
        {
          type: 'pie',
          radius: ['50%', '75%'],
          label: {
            // show: false,
            position: 'inside',
            formatter: '{c}'
          },
          data: dataOuter
        }
      ]
    }

    console.log(JSON.stringify(option, null, 2))

    this.chart.setOption(option)
  }
}
</script>

<style lang="scss" scoped>

</style>
